<template>
    <svg aria-hidden="true" :class="svgClass" @click="handleClick(props.iconClass)">
        <use :xlink:href="symbolId" />
    </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const emit = defineEmits(['on-change'])

const handleClick = (emo: string) => {
    // console.log("handleClick: ", emo)
    emit('on-change', emo)
}

const props = defineProps({
    prefix: { type: String, default: '' },
    iconClass: { type: String, required: true },
    end: { type: String, default: '-line' },
    svgClass: { type: String, default: '' },
})

const symbolId = computed(() => {
    // const icons = props.iconClass.split('-')
    const pre = props.prefix != '' ? props.prefix + '-' : ''
    return `#${pre}${props.iconClass}${props.end}`
})
// console.log(symbolId.value)

const svgClass = computed(() => {
    let icon = 'svg-icon'
    if (props.svgClass != '') {
        icon = icon + ' ' + props.svgClass;
    }
    return icon;
})

</script>

<style scoped>
.svg-icon {
    width: 24px;
    height: 24px;
    overflow: hidden;
    fill: currentColor;
    margin-top: -2px;
    vertical-align: middle;
}
</style>